<!DOCTYPE html>
<html> 
<head> 
<meta charset="utf-8"> 
<meta name=viewport content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
	<div data-role="header" style="overflow:hidden; display:none;" id="board_header">
		<h1>
		    
		    <span id="board_rival"></span>
		</h1>
		
	    <a href="#" data-rel="back" class="ui-btn-left ui-btn ui-icon-back ui-btn-icon-notext ui-shadow ui-corner-all" data-role="button" role="button">Back</a>
	</div><!-- /header -->

	<div data-role="header" style="overflow:hidden; display:none;" id="list_header">
		<h1>
		    Available games
		</h1>
		
	    <a href="#" data-rel="back" class="ui-btn-left ui-btn ui-icon-back ui-btn-icon-notext ui-shadow ui-corner-all" data-role="button" role="button" id="fromlisttomode">Back</a>
	</div><!-- /header -->

	<div data-role="header" style="overflow:hidden; display:none;" id="leader_header">
		<h1>
		    Leaderboard
		</h1>
		
	    <a href="#" data-rel="back" class="ui-btn-left ui-btn ui-icon-back ui-btn-icon-notext ui-shadow ui-corner-all" data-role="button" role="button" id="fromleadertomode">Back</a>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<div id="page_welcome">
			<a id="tosignin" href="#" class="ui-btn ui-btn-b">Sign in</a>
			<a id="tosignup" href="#" class="ui-btn">Sign up</a>
		</div>
		<div id="page_signin">
			<input type="text" name="userid" id="signin_userid" value="" placeholder="Username">
			<input type="password" name="passwd" id="signin_passwd" value="" placeholder="Password">
			<a id="signin" href="#" class="ui-btn ui-btn-b ui-btn-inline" data-inline="true">Sign in</a>
			<a href="#" class="ui-btn ui-btn-inline towelcome" data-inline="true">Cancel</a>
		</div>
		<div id="page_signup">
			<input type="text" name="userid" id="signup_userid" value="" placeholder="Pick Your Username">
			<input type="password" name="passwd" id="signup_passwd" value="" placeholder="Choose a Password">
			<input type="password" name="repasswd" id="signup_repasswd" value="" placeholder="Confirm the Password">
			<a id="signup" href="#" class="ui-btn ui-btn-b ui-btn-inline" data-inline="true">Sign up</a>
			<a id="cancel" href="#" class="ui-btn ui-btn-inline towelcome" data-inline="true">Cancel</a>
		</div>
		<div id="page_modes">
			<a id="create_game" href="#" class="ui-btn ui-btn-b">Create a Game</a>
			<a id="join_game" href="#" class="ui-btn">Join a Game</a>
			<a id="leaderboard" href="#" class="ui-btn">Leaderboard</a>
			<a id="signout" href="#" class="ui-btn">Sign out</a>
		</div>
		<div id="page_create">
			<input type="text" name="gamename" id="create_game_name" value="" placeholder="Game Name">
			<label for="slider2">Make my room private:</label>
			<select name="slider2" id="create_slider" data-role="slider">
			    <option value="off">Off</option>
			    <option value="on">On</option>
			</select>
			<input type="text" name="gamepwd" id="create_game_pwd" value="" placeholder="Password" style="display:none">
			<a id="create_game_room" href="#" class="ui-btn ui-btn-b ui-btn-inline" data-inline="true">Create game</a>
			<a href="#" class="ui-btn ui-btn-inline tomodes" data-inline="true">Cancel</a>
		</div>
		<div id="page_board">
			

			<table id="grids">
			</table>

		</div>
		<div id="page_lsrooms">
			<ul data-role="listview" id="room_list">
			</ul>
		</div>

		<div id="page_passwd_join_room">
			<input type="text" name="gamepwd" id="enter_game_pwd" value="" placeholder="Enter password">
			<a id="enter_game_room" href="#" class="ui-btn ui-btn-b ui-btn-inline" data-inline="true">Join</a>
			<a href="#" class="ui-btn ui-btn-inline" data-inline="true" id="toroomlist">Cancel</a>
		</div>

		<div id="page_leaderboard">
		   <table class="ui-responsive table-stroke ui-table">
		     <thead>
		       <tr>
		         <th>Rank</th>
		         <th>Player</th>
		         <th>Score</th>
		       </tr>
		     </thead>
		     <tbody id="leader_table">
		     </tbody>
		   </table>
		</div>
	</div>
</body>
<script>
//============================================================ page navigation %
var pages = ["page_welcome", "page_signin", "page_signup", "page_modes", "page_create", "page_board", "page_lsrooms", "page_passwd_join_room", "page_leaderboard"];

var me = {
	name : null
}

function show_page(which) {
	for(var idx in pages) {
		document.getElementById(pages[idx]).style.display = "none";
	}

	document.getElementById(which).style.display = "block";
}
function proceed_to_mode(myname) {
	tellWhoAmI(myname);
	show_page("page_modes");
}
function proceed_to_board(){
	$("#board_whoami").text(me.name);
	show_page("page_board");
	$("#board_header").css('display', 'block');
	create_grids();
}
function go_back_mode(){
	setTimeout(function(){
		show_page("page_modes");
		$("#board_header").css('display', 'none');
		$("#board_rival").empty();
	}, 2000);
}
show_page("page_welcome");
$("#tosignup").click(function(){
	show_page("page_signup");
});
$("#tosignin").click(function(){
	show_page("page_signin");
});
$(".towelcome").click(function(){
	show_page("page_welcome");
});
$("#create_game").click(function(){
	show_page("page_create");
});
$(".tomodes").click(function(){
	show_page("page_modes");
});
$("#join_game").click(function(){
	show_page("page_lsrooms");
});
$("#signout").click(function(){
	show_page("page_welcome");
});
$("#fromlisttomode").click(function() {
	$("#list_header").css('display', 'none');
	show_page("page_modes");
});
$("#fromleadertomode").click(function() {
	$("#leader_header").css('display', 'none');
	show_page("page_modes");
});
//============================================================ page navigation %


//============================================================ button actions %
$("#signin").click(function(){
	var userid = $("#signin_userid").val();
	if(userid.length < 6) {
		Android.showToast("Username may not be less than 6 letters.");
		return;
	}

	var passwd = $("#signin_passwd").val();
	Android.signIn(userid, passwd);
});
$("#signup").click(function(){
	var userid = $("#signup_userid").val();
	if(userid.length < 6) {
		Android.showToast("Username may not be less than 6 letters.");
		return;
	}

	var passwd, repasswd;
	passwd = $("#signup_passwd").val();
	repasswd = $("#signup_repasswd").val();

	if(passwd === repasswd)
		Android.signUp(userid, passwd);
	else
		Android.showToast("Password doesn't match confirmation.");
});
$("#create_slider").change(function(){
	var onOff = this.value;
	if(onOff === "on") document.getElementById("create_game_pwd").style.display = "block";
	else document.getElementById("create_game_pwd").style.display = "none";
});
$("#create_game_room").click(function(){
	Android.createGame($("#create_game_name").val(), $("#create_game_pwd").val());
});
$("#join_game").click(function(){
	Android.listRooms();
});
$("#toroomlist").click(function(){
	show_page("page_lsrooms");
	Android.listRooms();
});
$("#enter_game_room").click(function(){
	var lk = $("#lk" + $(this).attr("room"));
	Android.joinGame(lk.attr("roomid"), lk.attr("aid"), lk.attr("ownerid"), $("#enter_game_pwd").val());
});
$("#leaderboard").click(function(){
	show_page("page_leaderboard");
	Android.listPlayers();
});
//============================================================ button actions %

//============================================================ board actions %

var hasRival, owner, created = 0;

function create_grids(){

	if(created) {
		$("#grids td").css('background', 'transparent');
		return;
	}

	created = 1;

	var square = 10;
	var grids = $("#grids");

	var width = parseInt(window.screen.availWidth / 100) * 90;
	grids.css(
	{
		'width': width + 'px',
		'height': width + 'px',
		'margin': 'auto'
	}
	);

	var grid_wid = (width / square) - 2;

	for(var i = 0; i != square; ++i) {

		var row = $("<tr></tr>");

		for(var j = 0; j != square; ++j) {
			var grid = $("<td class='grid'></td>");
			grid.css({
				'width' : grid_wid + 'px',
				'height' : grid_wid + 'px'
			});
			grid.attr('row', i);
			grid.attr('col', j);
			grid.attr('id', 'grid' + i + '-' + j);

			(function(pi, pj) {
				grid.click(function(){
					if(hasRival == 1)
						Android.move(pi, pj);
				});
			})(i, j);

			row.append(grid);
		}

		grids.append(row);
	}
};

create_grids();

function draw_mine(row, col) {
	$("#grid" + row + "-" + col).css('background-color', owner == 1 ? '#38c' : '#000');
}

function draw_other(row, col) {
	$("#grid" + row + "-" + col).css('background-color', owner == 1 ? '#000' : '#38c');
}


//============================================================ board actions %


//============================================================ Data population utilities %
function tellBoardRival(rivalName) {
	$("#board_rival").text('v.s.' + rivalName);
	hasRival = 1;
	owner = 1;
}

function tellBoardOwner(ownername) {
	$("#board_rival").text('v.s.' + ownername);
	$("#list_header").css('display', 'none');
	proceed_to_board();
	hasRival = 1;
	owner = 0;
}

function tellWhoAmI(myname) {
	me.name = myname;
}

function populate_rooms(rooms) {
	var rlist = $("#room_list");
	rlist.empty();
	$("#list_header").css('display', 'block');
	for(var idx in rooms) {
		var li = $("<li></li>");
		var lk = $("<a href='#' class='ui-btn'></a>");
		lk.text('[' + rooms[idx].id + '] ' + rooms[idx].name);
		lk.attr('pwd', rooms[idx].pwd);
		lk.attr('aid', rooms[idx].aid);
		lk.attr('roomid', rooms[idx].id);
		lk.attr('ownerid', rooms[idx].ownerid);
		lk.attr('id', 'lk' + rooms[idx].id);
		if(rooms[idx].pwd == 1)
			lk.addClass('ui-icon-lock ui-btn-icon-right');
		li.append(lk);

		// bind event for list item
		lk.click(function(){
			if($(this).attr('pwd') == 1) {
				show_page("page_passwd_join_room");
				$("#enter_game_room").attr('room', $(this).attr('roomid'));
			} else {
				Android.joinGame($(this).attr("roomid"), $(this).attr("aid"), $(this).attr("ownerid"), null);
			}
		});


		rlist.append(li);
	}
}

function populate_players(players, myrank, myscore) {
	var rlist = $("#leader_table");
	rlist.empty();
	var hasMe = 0;
	$("#leader_header").css('display', 'block');
	for(var idx = 0, len = players.length; idx != len; ++idx) {
		var player = players[idx];
		var tr = $("<tr></tr>");

		var td0 = $("<td></td>"), td1 = $("<td></td>"), td2 = $("<td></td>");
		td0.text(idx + 1);
		td1.text(player.name);
		td2.text(player.score);

		if(player.name === me.name) {
			tr.css('background-color', '#3388cc').css('color', '#fff').css('text-shadow', '0 1px 0 #059');
			hasMe = 1;
		}

		tr.append(td0);
		tr.append(td1);
		tr.append(td2);

		rlist.append(tr);
	}

	if(!hasMe) {
		var tr = $("<tr></tr>");
		tr.css('background-color', '#3388cc').css('color', '#fff').css('text-shadow', '0 1px 0 #059');

		var td0 = $("<td></td>"), td1 = $("<td></td>"), td2 = $("<td></td>");
		td0.text(parseInt(myrank) + 1);
		td1.text(me.name);
		td2.text(myscore);

		tr.append(td0);
		tr.append(td1);
		tr.append(td2);

		rlist.append(tr);
	}
}
//============================================================ Data population utilities %
</script>
</html>
